<template>
    <div class="toolbar">
        <template v-for="(item,i) in toolbarConfig">
            <!-- 插槽 -->
            <template v-if="item.slotName">
                <slot :name="item.slotName"></slot>
            </template>
            <template v-else>
                <component :is="'el-dropdown'" :key="i" v-if="item.children&&item.children" @command="handleCommand" class="dropdown">
                    <el-button v-bind="item" v-on="item">
                        {{item.content}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(temp,j) in item.children" :command="i+'/'+j" v-bind="temp" :key="i+'a'+j">{{temp.content}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </component>
                <component :is="'el-button'" :key="i" v-else v-bind="item" v-on="item">
                    {{item.content}}
                </component>
            </template>
        </template>
    </div>
</template>

<script>
export default {
    props: {
        toolbarConfig: {
            default: () => {
                return [
                    // {
                    //     slotName: 'input'
                    // },
                    // {
                    //     content: '上传', type: 'primary', icon: 'el-icon-upload', click () {
                    //         console.log('上传')
                    //     }
                    // },
                    // {
                    //     content: '批量删除', type: 'primary', icon: 'el-icon-delete', click () {
                    //         console.log('批量删除')
                    //     }
                    // },
                    // {
                    //     content: '新增2222', type: 'primary', children: [
                    //         {
                    //             content: '按钮1', click () {
                    //                 console.log('按钮1')
                    //             }
                    //         },
                    //         {
                    //             content: '按钮2', click () {
                    //                 console.log('按钮2')
                    //             }
                    //         },
                    //     ]
                    // },
                ]
            },
            type: Array
        }
    },
    methods: {
        handleCommand (command) {
            let i = command.split('/')[0]
            let j = command.split('/')[1]
            this.toolbarConfig[i].children[j].click?.();
        }
    }

}
</script>

<style lang="scss" scoped>
.toolbar {
    display: flex;
    align-items: center;
    .dropdown {
        margin: 0 10px;
        // 解决带icon的button比不带icon的button高1px
        // ::v-deep .el-button {
        //     span {
        //         display: flex;
        //     }
        // }
    }
    .dropdown:first-child {
        margin-left: 0;
    }
}
</style>